<template>
  <div>
    <van-cell-group>
      <van-cell :title-style="{fontWeight:'bold'}" title="我的关注"></van-cell>
    </van-cell-group>

    <van-row class="coupon_status">
      <van-col span="8" @click="showCollectCouponList">
        <div class="mount">{{baseData.collectionCount}}</div>
        <div class="title">我的收藏</div>
      </van-col>
      <van-col span="8" @click="showCouponList">
        <div class="mount">{{baseData.couponCount}}</div>
        <div class="title">我的卡券</div>
      </van-col>
      <van-col span="8" @click="showCouponScoreList">
        <div class="mount">{{baseData.integration}}</div>
        <div class="title">我的积分</div>
      </van-col>
    </van-row>
    <!-- 优惠券列表 -->
    <van-popup v-model="showCoupon" position="bottom">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="donothing" @exchange="donothing" />
    </van-popup>
    <!-- 优惠券列表End -->
    <!--我的积分列表-->
    <van-popup v-model="scoreData.show" :style="{height:'80%'}" close-icon="cross" closeable position="bottom">
      <van-list v-model="scoreData.loading" :finished="scoreData.finished" loading-text="加载中..." finished-text="没有更多了" @load="loadScoreData">

        <van-cell v-for="(item,index) in scoreData.list" :key="index">
          <p>积分：{{item.score}}</p>
        </van-cell>
      </van-list>
    </van-popup>
    <!--我的积分列表End-->
    <!--我的收藏列表-->
    <van-popup v-model="collectData.show" :style="{height:'80%'}" close-icon="cross" closeable position="bottom">
      <van-list v-model="collectData.loading" :finished="collectData.finished" loading-text="加载中..." finished-text="没有更多了" @load="loadCollectData">

        <van-cell v-for="(item,index) in collectData.list" :key="index">
          <p>收藏：商品{{index}}--{{item.price}}</p>
        </van-cell>
      </van-list>
    </van-popup>
    <!--我的收藏列表End-->
  </div>
</template>

<script>
import { Row, Col, List } from 'vant';
import { CouponCell, CouponList, Popup } from 'vant';
import { couponSelectList } from '@/api/api';
export default {
  data () {
    return {
      showCoupon: false,
      coupons: [],
      chosenCoupon: -1,
      disabledCoupons: [],
      scoreData: {
        show: false,
        loading: false,
        finished: false,
        searchParam: {
          page: 1, size: 10
        },
        list: [{ score: 1 }]
      },
      collectData: {
        show: false,
        loading: false,
        finished: false,
        searchParam: {
          page: 1, size: 10
        },
        list: [{ score: 1 }]
      }

    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [CouponCell.name]: CouponCell,
    [CouponList.name]: CouponList,
    [Popup.name]: Popup,
    [List.name]: List
  },
  props: {
    baseData: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    showAndCloseOther (key) {
      this.showCoupon = false;
      this.collectData.show = false;
      this.scoreData.show = false;
      this[key].show = true;
    },
    // 积分start
    showCouponScoreList () {
      this.scoreData.searchParam = { page: 1, size: 10 };
      this.showAndCloseOther('scoreData');
    },
    loadScoreData () {
      // 用this.scoreData.searchParam 去查询数据，查询成功后及时的讲分页参数赋值到该对象内
      let { page, size } = this.scoreData.searchParam;
      let { list } = this.scoreData;
      this.scoreData.loading = true; // 查询时开启loading
      for (let i = list.length; i < page * size; i++) {
        list.push({ score: Math.random() })
      }
      this.scoreData.searchParam.page++;
      this.scoreData.loading = false; // 完成后关闭loading
      this.scoreData.finished = false; // 如果以及查完则设置true
    },
    // 积分end
    // 收藏
    showCollectCouponList () {
      this.collectData.searchParam = { page: 1, size: 10 };
      this.showAndCloseOther('collectData');
    },
    loadCollectData () {
      // 用this.scoreData.searchParam 去查询数据，查询成功后及时的讲分页参数赋值到该对象内
      let { page, size } = this.collectData.searchParam;
      let { list } = this.collectData;
      this.collectData.loading = true; // 查询时开启loading
      for (let i = list.length; i < page * size; i++) {
        list.push({ price: Math.random() })
      }
      this.collectData.searchParam.page++;
      this.collectData.loading = false; // 完成后关闭loading
      this.collectData.finished = false; // 如果以及查完则设置true
    },
    // 收藏end
    // 优惠卷
    showCouponList () {
      this.showCoupon = true;
      couponSelectList({ status: 0, pageNo: 1, pageSize: 10 }).then(res => {
        var cList = res.data.result;
        this.coupons = []
        this.disabledCoupons = [];
        for (var i = 0; i < cList.length; i++) {
          var c = cList[i]
          var coupon = {
            id: c.id,
            cid: c.cid,
            name: c.name,
            condition: '满' + c.price + '元可用',
            value: c.price,
            description: c.note,
            startAt: new Date(c.useStartTime).getTime() / 1000,
            endAt: new Date(c.overdueTime).getTime() / 1000,
            // valueDesc: c.price,
            unitDesc: '元'
          }
          if (c.useStatus == 0) {
            this.coupons.push(coupon);
          } else {
            this.disabledCoupons.push(coupon);
          }
        }

      })
    },
    donothing () {

    },
  }
};
</script>
<style lang="scss" scoped>
.van-row {
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.mount,
.title {
  text-align: center;
}
.mount {
  margin-bottom: 12px;
}
</style>